import React, { Component } from 'react'
import { Form, Input, Select } from 'antd'
import PropTypes from 'prop-types'

const { Option } = Select
export default class UserForm extends Component {
  static propTypes = {
    roles: PropTypes.array.isRequired,
    setForm: PropTypes.func,
    user: PropTypes.object
  }

  render() {
    const { roles, user } = this.props
    return (
      <Form
        labelCol={{
          span: 6,
        }}
        wrapperCol={{
          span: 14,
        }}
        name="userForm"
        onValuesChange={(_, allValues) => {this.props.setForm(allValues)}}
      >
        <Form.Item 
          label="用户名"
          name="username"
          initialValue={user.username}
          rules={[
            { required: true, message: '请输入用户名!' },
            { min: 4, message: '用户名最少4位!' },
            { max: 12, message: '用户名最多12位!' },
            { pattern: /^[0-9a-zA-Z_]{1,}$/, message: '用户名必须是英文、数字、下划线组成!' }
          ]}
        >
          <Input 
            placeholder="请输入用户名" 
          />
        </Form.Item>
        {
          !user.password ? (
            <Form.Item 
              label="密码"
              name="password"
              initialValue={user.password}
              rules={[
                { required: true, message: '请输入密码!' },
                { min: 4, message: '用户名最少4位!' },
                { max: 12, message: '用户名最多12位!' },
                { pattern: /^[0-9a-zA-Z_]{1,}$/, message: '用户名必须是英文、数字、下划线组成!' }
              ]}
            >
              <Input 
                placeholder="请输入密码" 
              />
            </Form.Item> ) : ''
        }
        <Form.Item 
          label="手机号"
          name="phone"
          initialValue={user.phone}
          rules={[{required: true, message: '手机号必须输入！'}]}
        >
          <Input 
            placeholder="请输入手机号" 
          />
        </Form.Item>
        <Form.Item 
          label="邮箱"
          name="email"
          initialValue={user.email}
          rules={[{required: true, message: '邮箱必须输入'}]}
        >
          <Input 
            placeholder="请输入邮箱" 
          />
        </Form.Item>
        <Form.Item 
          label="角色"
          name="role_id"
          initialValue={user.role_id}
          rules={[{required: true, message: '角色名称必须输入'}]}
        >
          <Select>
            {
              roles.map(role => <Option key={role._id} value={role._id}>{role.name}</Option>)
            }
          </Select>
        </Form.Item>
      </Form>
    )
  }
}
